<template>
  <view class="myPage">
    <view class="section">
      <view class="top">
        <text>投诉问题</text>
        <text>{{ details.suggestionTypeName }}</text>
      </view>
      <view class="time">{{ details.createTime }}</view>
      <view class="text">{{ details.suggestContent }}</view>
      <view class="images">
        <image v-for="(img, index) in details.attachmentList" :key="index" :src="url + img.attaPath" @click="preview(details.attachmentList, index)"></image>
      </view>
    </view>
    <view class="bg"></view>
    <view class="section" v-if="details.replyContent && details.replyContent != ''">
      <view class="title">投诉问题</view>
      <view class="time">{{ details.updateTime }}</view>
      <view class="text">
		   <mp-html :content="details.replyContent" />
      </view>
    </view>
    <view class="section" v-else>
      <view class="title2">暂无答复</view>
    </view>
  </view>
</template>

<script>
	import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
	import {requestGet} from '@/utils/request.js';
  const img_url = process.env.VUE_APP_BASEURL_IMG_API;
export default {
  data() {
    return {
      details: null,
      url: img_url
    };
  },
  components: {
	  mpHtml
  },
  onLoad(option){
    console.log('details======', option.id);
    this.getDetail(option.id);
  },
  methods: {
	  getDetail(id) {
		  requestGet(`/suggestion/${id}`,{}, '/baseplatform').then(res => {
			  console.log('getDetail====', res)
        if(res.code === 200){
          res.data.replyContent = res.data && res.data.replyContent ? res.data.replyContent.split("\t").join("&nbsp;&nbsp;&nbsp;&nbsp;") : '';
          this.details = res.data;
        }
		  }).catch((err) => console.log('错误了', err))
	  },
    preview(list,index){
      const urls = list.map(item => img_url + item.attaPath)
      uni.previewImage({ urls,current: index });
    }
  }
};
</script>

<style lang="scss" scoped>
  .myPage{
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: auto;
    background: #FFFFFF;
    .section{
      height: auto;
      padding: 0 32rpx;
    }
    .bg{
      width: 100%;
      height: 16rpx;
      background: #ECEFF1;
    }
    .top{
      margin-top: 24px;
      width: 100%;
      text:first-child{
        font-size: 32rpx;
        font-weight: 400;
        color: rgba(0,0,0,0.5);
        line-height: 44rpx;
      }
      text:last-child{
        font-size: 32rpx;
        font-weight: 700;
        color: rgba(0,0,0,0.8);
        line-height: 44rpx;
        margin-left: 22rpx;
      }
    }
    .time{
      width: 100%;
      font-size: 24rpx;
      font-weight: 400;
      color: rgba(0,0,0,0.5);
      line-height: 32rpx;
      padding: 8rpx 0 24rpx 0;
      border-bottom: 1rpx solid #F3F3F3;
    }
    .text{
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(0,0,0,0.7);
      line-height: 40rpx;
      padding: 24rpx 0 32rpx 0;
      word-break: break-all;
    }
    .images{
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      margin: 16rpx 0;
      image{
        flex: 0 0 auto;
        width: 152rpx;
        height: 152rpx;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        margin-right: 24rpx;
      }
    }
    .title{
      font-size: 32rpx;
      font-weight: 700;
      color: #3FAA73;
      line-height: 44rpx;
      margin-top: 32rpx;
    }
    .title2{
      font-size: 32rpx;
      font-weight: 600;
      color: #87A198;
      line-height: 44rpx;
      margin-top: 32rpx;
    }
  }
</style>